<template>
  <div class="qup-full-page">

    <template v-if="showDetailPage">
      <Details ref="refDetail" :detail-data="activeRowData" :page-show.sync="showDetailPage" @goBack="refreshTable" />
    </template>
    <div v-show="!showDetailPage && !showEdit">
      <!-- 顶部搜索 -->
      <div style="margin-bottom:10px">
        <search-form
          ref="searchForm"
          :search-config="searchConfig"
          :label-width="120"
          @clear="clearSearch"
          @search="handleSearch"
        />
      </div>

      <template>
        <c-permission-tabs v-model="activeName" code="tab">
          <el-tab-pane label="全部" name="all" opt-code="all">
            <c-table-box ref="exceptionTable" checkbox hide-func :other-raw="otherRaw1" :selected-arry.sync="tableSelected" :other-filters="otherFilters" :table-config="tableConfig" @selection-change="handleSelectionChange">
              <template #btn>
                <c-permission code="all">
                  <c-button type="primary" opt-code="export" @click="handleExport">导出</c-button>
                </c-permission>
              </template>
            </c-table-box>
          </el-tab-pane>
          <el-tab-pane label="待审核" name="audit" opt-code="audit">
            <c-table-box ref="examineTable" checkbox hide-func :other-raw="otherRaw" :selected-arry.sync="tableSelected" :other-filters="otherFilterSecond" :table-config="tableConfig" @selection-change="handleSelectionChange">
              <template #btn>
                <c-permission code="audit">
                  <c-button type="primary" opt-code="audit" @click="handleExamine">审核</c-button>
                </c-permission>
              </template>
            </c-table-box>
          </el-tab-pane>
        </c-permission-tabs>
      </template>
    </div>
    <export-files
      v-if="exportVisible"
      title="导出"
      :config="exportConfig"
      :visible.sync="exportVisible"
      @success="handleExportSuccess"
    />
    <examine-dialog v-if="showEditDlg" ref="tipDlg" :visible.sync="showEditDlg" :detail-data="activeRowData" @success="refreshTable" />
  </div>
</template>
<script>

import Details from './Details' // 详情
import ExamineDialog from './ExamineDialog.vue'
import { queryBtnList } from '@/api/basicData'
export default {
  name: 'ExceptionManage',
  components: { Details, ExamineDialog },
  data() {
    return {
      showEditDlg: false,
      activeName: 'all',
      activeRowData: '',
      exportVisible: false,
      btnList: [],
      searchConfig: [
        {
          label: '所属模块',
          prop: 'belongModel',
          type: 'select',
          value: this.$route.query.functionModel || '',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/BELONG_MODEL?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '异常类型', prop: 'exceptionType', type: 'text', value: '', placeholder: '' },
        { label: '异常提报人', prop: 'createBy', type: 'text', value: '', placeholder: '' },
        { label: '业务编码', prop: 'bizCode', type: 'text', value: '', placeholder: '' },
        { label: '业务名称', prop: 'bizName', type: 'text', value: '', placeholder: '' },
        { label: '门店建设项目号', prop: 'constCode', type: 'text', value: this.$route.query.constCode || '', placeholder: '' },
        {
          label: '所属门店',
          prop: 'shopCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'get',
            remoteUrl: '/select-service/api/v1/shop/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属门店',
            interfacePath: '/select-service/api/v1/shop/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            pageFlag: true
          }
        },
        {
          label: '所属客户',
          prop: 'clientCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            apiHeader: {
              'permission-code': 'exceptionmanage',
              'Permission-App': 'slm'
            },
            requestMethod: 'get',
            remoteUrl: '/select-service/api/v1/customer/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属客户',
            interfacePath: '/select-service/api/v1/customer/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            pageFlag: true
          }
        },
        {
          label: '所属办事处',
          prop: 'officeCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'get',
            remoteUrl: '/select-service/api/v1/organization/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            pageFlag: true
          }
        },
        { label: '时间区间', prop: 'createTime', type: 'date', value: '', placeholder: '' },
        {
          label: '是否涉及扣款',
          prop: 'isRelateDeduction',
          type: 'select',
          config: {
            selectData: [
              { value: 1, label: '是' },
              { value: 0, label: '否' }
            ]
            // remote: true,
            // remoteUrl: `/data-dict/api/v2/dictionary/BELONG_MODEL?appCode=slm&domainCode=marketing`,
            // defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          label: '异常状态',
          prop: 'state',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/SHOP_EXCEPTION_STATE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        }

      ],
      tableSelected: [], // 初始化选择表格数据
      selectList: [], // 初始化选中
      otherRaw: { 'isBpmReview': 0, 'isEnd': 0 },
      otherRaw1: {},
      otherFilter: [{ 'id': 'state1', 'property': 'state', 'operator': '=', 'value': 'A' }], // 表格额外查询条件
      otherFilters: [], // 全部表格额外查询条件
      otherFilterSecond: [{ 'id': 'state1', 'property': 'state', 'operator': '=', 'value': 'A' }], // 待审核查询条件
      tableConfig: {
        // interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/transfer/transferPage`,
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/shopException/page`,
        hideSearchBar: true,
        apiHeader: {
          'Permission-Percode': 'exceptionmanage',
          'Permission-App': 'slm'
        },
        order: 'desc',
        sort: 'createTime',
        setting: [
          {
            prop: 'exceptionCode',
            label: '异常编码',
            minWidth: 150,
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'belongModel',
            label: '所属模块',
            minWidth: 150,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BELONG_MODEL'
            }
          },
          {
            prop: 'bizCode',
            label: '业务编码',
            minWidth: 130
          },
          {
            prop: 'bizName',
            label: '业务名称',
            minWidth: 170
          },
          {
            prop: 'exceptionType',
            label: '异常类型',
            minWidth: 170
          },
          {
            prop: 'constCode',
            label: '门店建设项目号',
            minWidth: 170
          },
          {
            prop: 'shopName',
            label: '所属门店',
            minWidth: 170
          },
          {
            prop: 'clientName',
            label: '所属客户',
            minWidth: 170
          },
          {
            prop: 'officeName',
            label: '所属办事处',
            minWidth: 170
          },
          {
            prop: 'isBpmReview',
            label: '是否BPM审批',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'bpmInstanceNo',
            label: 'BPM申请单号',
            minWidth: 170
          },
          {
            prop: 'createBy',
            label: '异常提报人',
            minWidth: 170
          },
          {
            prop: 'createTime',
            label: '异常提报时间',
            minWidth: 170
          },
          {
            prop: 'handler',
            label: '异常处理人',
            minWidth: 170
          },
          {
            prop: 'state',
            label: '异常状态',
            minWidth: 170,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'SHOP_EXCEPTION_STATE'
            }
          }
        ]
      },
      showDetailPage: false,
      showEdit: false,
      showNew: false
    }
  },
  computed: {
    exportConfig() {
      return [{
        code: 'export',
        name: '门店建设异常',
        dataApi: '/slm-admin/api/v1/shopException/export/?type=0',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'id',
        headers: {
          'Permission-perCode': 'exceptionmanage',
          'Permission-App': 'slm'
        }
      }]
    },
    noRequest() {
      return this.$route.query.constCode !== undefined
    }
  },
  created() {
    const menuCode = this.$route.query.menuCode || 'PC6753556'
    queryBtnList(menuCode, 'default').then(res => {
      if (res.success && res.data && res.data.groovyList && (res.data.groovyList.length || res.data.groupList.length)) {
        this.btnList = [...res.data.groovyList, ...res.data.groupList]
      }
    })
    // 任务管理跳转至该页面直接显示详情
    this.fromDesignTask()
  },
  mounted() {
    if (this.noRequest) {
      this.$refs.searchForm.handleSearch()
    }
  },
  methods: {
    // 导出成功
    handleExportSuccess() {
      this.$message.success('导出成功！')
    },
    // 搜索
    handleSearch(data) {
      const arr1 = data.filtersRaw.filter(item => (item.property !== 'isRelateDeduction'))
      this.otherFilters = [...arr1]
      data.filtersRaw.forEach(item => {
        if (item.property === 'isRelateDeduction') {
          this.otherRaw1 = { 'isRelateDeduction': item.value }
          this.otherRaw = { 'isRelateDeduction': item.value, 'isBpmReview': 0, 'isEnd': 0 }
        }
      })
      this.otherFilterSecond = [...this.otherFilter, ...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.exceptionTable.initTableData()
        this.$refs.examineTable.initTableData()
      })
    },
    handleExport() {
      this.exportVisible = true
    },
    // 清空搜索
    clearSearch() {
      this.otherRaw1 = {}
      this.otherRaw = { 'isBpmReview': 0, 'isEnd': 0 }
    },
    handleSelectionChange(val) {
      this.tableSelected = val
    },
    // 按钮组
    btnClick(btn) {
      switch (btn.buttonCode) {
        case 'audit':
          this.handleExamine()
          break
        default:
          break
      }
    },
    handleExamine() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择审核项')
        return
      }
      if (this.tableSelected.length > 1) {
        this.$message.warning('该操作仅支持单选')
        return
      }
      this.activeRowData = this.tableSelected[0]
      this.showEditDlg = true
    },
    // 查看详情
    handleDetail(data) {
      this.showDetailPage = true
      this.showEdit = false
      this.activeRowData = data
    },
    // 设计任务跳转至该页面
    fromDesignTask() {
      const { id, target } = this.$route.query
      if (!id || !target) return
      this.handleDetail({ id })
    },
    refreshTable(isInit) {
      this.showDetailPage = false
      this.showEdit = false
      this.$refs.exceptionTable.initTableData()
      this.$refs.examineTable.initTableData(isInit ? '' : 'onPage')
    },
    handleClick(activeTab) {
      if (activeTab.name === 'all') {
        this.$refs.exceptionTable.initTableData()
      }
    }
  }
}
</script>

